<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
    }

    #captcha {
      --width: 400px;
      --height: 260px;
      --pw: 80px;
      --ph: 80px;
      --offset: 0px;


      display: block;
      width: var(--width);
      height: var(--height);
      border-radius: 4px;
      background-image: url(https://source.unsplash.com/collection/94734566/1920x1080);
      background-size: cover;
      background-position: center;
      position: relative;
      box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
    }

    #captcha::before, #captcha::after {
      position: absolute;
      content: '';
      display: block;
      width: inherit;
      height: inherit;
      background-image: inherit;
      /* background-color: lightblue; */
      background-position: inherit;
      background-size: inherit;
      /*  上右下左 + 圆角 */
      clip-path: inset(
        90px
        90px
        90px
        230px
        round 6px
      );
      -webkit-clip-path: inset(
        90px
        90px
        90px
        230px
        round 6px
      );
    }

    #captcha::after {
      transform: translateX(
        clamp(
          calc( var(--width) * -1 ),
          calc(var(--width) * -1 + var(--offset)),
          var(--pw)
        )
      );

      transition: 0.25s all ease-in-out;
    }

    #captcha:active::after {
      transition: none;
    }

    #captcha::before {
      background-color: rgba(0, 0, 0, 0.6);
      background-blend-mode: multiply;
    }

    .slide {
      width: calc( var(--width) + var(--pw) * 2 );
      height: 30px;
      border-radius: 18px;
      background-color: #eee;
      position: absolute;
      bottom: -50px;
      left: calc( var(--pw) * -2 );
      box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.2);
      border: 1px solid #ccc;
    }

    .btn {
      display: block;
      width: var(--pw);
      height: inherit;
      border-radius: inherit;
      background-color: white;
      box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.3);
      position: absolute;
      cursor: move;
      transform: translateX(
        clamp(
          0px,
          var(--offset),
          calc( var(--width) + var(--pw) )
        )
      );

      transition: 0.25s all ease-in-out;
    }

    #captcha:active .slide .btn {
      transition: none;
    }

    #captcha.pass::before, #captcha.pass::after, #captcha.pass > .slide {
      opacity: 0;
    }
  </style>
</head>
<body>
  <div id="captcha">
    <div class="slide">
      <span class="btn"></span>
    </div>
  </div>
  <script>
    let canMove = false;
    const cap = document.querySelector('#captcha');
    const handle = document.querySelector('.slide');
    const btn = document.querySelector('.btn');

    btn.addEventListener('mousedown', () => {
      canMove = true;
    });

    window.addEventListener('mousemove', (e) => {
      if (canMove) {
        const offset = handle.getBoundingClientRect().left;
        const btn_width = btn.getBoundingClientRect().width;

        cap.style.setProperty('--offset', `${e.clientX - offset - btn_width / 2}px`);
      }
    });

    window.addEventListener('mouseup', (e) => {
      if (canMove) {
        const final_offset = e.clientX - handle.getBoundingClientRect().left;
        if (final_offset >= 430 && final_offset <= 450) {
          console.log('pass');
          cap.classList.add('pass');
        } else {
          cap.style.setProperty('--offset', `0px`);
          console.log('fail');
        }

        canMove = false;
      }
    })
  </script>
</body>
</html>